<script setup>
import { computed } from 'vue'
import TodoItem from './TodoItem.vue'
import CreateButton from './CreateButton.vue'
import { useTodoStore } from '../stores/todo'

/* 导入pinia仓库 */
const todoStore = useTodoStore()

/* 渲染有效待办项 */
const activeTodos = computed(() => {
  return todoStore.list.filter(item => item.status === 'active')
})

/* 创建待办项 */
function createItem() {
  todoStore.create()
}

/* 删除待办项 */
function deleteItem(id) {
  todoStore.remove(id)
}

/* 修改待办项文本 */
function editItemRequest(id) {
  console.log(id)
  // todoStore.editText(id)
}

</script>

<template>
  <div class="todo-list">
    <div
      v-for="item in activeTodos"
      :key="item.id"
      class="todo-item"
    >
      <TodoItem
        :item="item"
        @delete="deleteItem"
        @edit-it="editItemRequest"
      />
    </div>
    <CreateButton 
      v-if="activeTodos.length < 5"
      @create="createItem"
    />
  </div>
</template>

<style scoped>
.todo-list {
  width: 400px;
  height: 400px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.todo-item {
  width: 380px; 
  height: 40px;
  padding: 10px;
  background-color: #f9f9f9;

  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
}
</style>